<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国地图-省市下钻1</title>
    <script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.5-beta.5/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.6/data-set.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xFOt8XQh5Ms8pliupLlDxehAFsD59A6z"></script>
    <script src="https://wanlong.mxnet.cn/wanlong-assets/assets/map.js"></script>
    <link rel="stylesheet" type="text/css" href="https://wanlong.mxnet.cn/wanlong-assets/assets/css/base.css">
    <link rel="stylesheet" type="text/css" href="https://wanlong.mxnet.cn/wanlong-assets/assets/css/public.css">
</head>
<body>
<div class="aside" style="display: none;" id="aside">
    <div class="aside-operate" id="menu-packup">
        <img src="https://wanlong.mxnet.cn/wanlong-assets/assets/img/menu-packup.png" class="menu-packup" title="收起菜单">
    </div>
    <div class="workbench">
        <div ng-class="{true:'active',false:''}[selectedV2=='Workbench_Index']">
            <i></i>
            <span>工作台</span>
        </div>
    </div>
    <div class="task" ng-click="clickMenu()">
        <div>
            <i></i>
            <span>任务管理</span>
        </div>
    </div>
    <div class="arrange">
        <div ng-class="{true:'active',false:''}[selectedV2=='Arrange_Manager']">
            <i></i>
            <span>排班管理</span>
        </div>
    </div>
    <div class="user">
        <div ng-class="{true:'active',false:''}[selectedV2=='User_Manager']">
            <i></i>
            <span>用户管理</span>
        </div>
    </div>
    <div class="system">
        <div ng-class="{true:'active',false:''}[selectedV2=='System_Manager']">
            <i></i>
            <span>系统设置</span>
        </div>
    </div> 
</div>
<div class="aside aside-fold" style="display: block;" id="aside-fold">
    <div class="aside-operate" id="menu-unfold">
        <img src="https://wanlong.mxnet.cn/wanlong-assets/assets/img/menu-unfold.png" class="menu-unfold" title="展开菜单">
    </div>
    <div class="workbench">
        <div class="fold-div" ng-class="{true:'active',false:''}[selectedV2=='Workbench_Index']">
            <i></i>
        </div>
    </div>
    <div class="monitor">
        <div class="fold-div" ng-class="{true:'active',false:''}[selectedV2=='Monitor_Index']">
            <i></i>
        </div>
    </div>
    <div class="task-fold">
        <div class="fold-div" ng-class="{true:'active',false:''}[selectedV1=='Task']">
            <i></i>
        </div>
    </div>
    <div class="arrange">
        <div class="fold-div" ng-class="{true:'active',false:''}[selectedV2=='Arrange_Manager']">
            <i></i>
        </div>
    </div>
    <div class="user">
        <div class="fold-div" ng-class="{true:'active',false:''}[selectedV2=='User_Manager']">
            <i></i>
        </div>
    </div>
    <div class="system">
        <div class="fold-div" ng-class="{true:'active',false:''}[selectedV2=='System_Manager']">
            <i></i>
        </div>
    </div> 
</div>
<div class="main" id="screen">
    <div class="main-view">
        <div class="view-left">
            <div class="view-left-top">
                <div class="main-view-title clear">
                    <span>客户状态总览</span>
                    <a>更多</a>
                </div>
                <div class="view-left-table">
                    <table class="table table-list table-hover table-striped">
                        <thead>
                            <tr>
                                <th>排名</th>
                                <th>区域</th>
                                <th>客户数</th>
                            </tr>

                        </thead>
                        <tbody>
                            {% for state in mydata['state_list'] %}
                            <tr>
                                <td>{{state["rownum"]}}</td>
                                <td>{{state["item"]}}</td>
                                <td>{{state["count"]}}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="view-left-bottom">
                <div class="main-view-title clear">
                    <span>客户占比</span>
                </div>
                <div id="c3"></div>
            </div>
        </div>

        <div class="view-center">
            <div class="view-center-top">
                <div class="map-title"></div>
                <div id="china"></div>
                <div id="province" style="display: none;"></div>
                <div id="city" style="display: none;"></div>
                <div class="map-main"><div id="allmap" style="width:100%;height:100%;display: none;"></div></div>
            </div>

            <div class="view-center-bottom">
                <div class="main-view-title clear">
                    <span>待办事项</span>
                    <a>更多</a>
                </div>
                <div class="view-center-table">
                    <table class="table table-list table-hover table-striped">
                        <thead>
                            <tr>
                                <th class="area">区域</th>
                                <th class="customer-info">客户信息</th>
                                <th class="status">状态</th>
                                <th class="time">发生时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="area">浙江省</td>
                                <td class="customer-info">杭州火电厂</td>
                                <td class="status">待激活</td>
                                <td class="time">07/31 08:12</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="view-right">
            <div class="view-right-top">
                <div class="main-view-title clear">
                    <span>报警信息</span>
                    <a>更多</a>
                </div>
                <div class="view-right-table">
                    <table class="table table-list table-hover table-striped">
                        <thead>
                            <tr>
                                <th class="customer-info">客户信息</th>
                                <th class="index">指标</th>
                                <th class="time">生效时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="customer-info"><span>浙江省杭州市杭州火电厂</span></td>
                                <td class="index">温度</td>
                                <td class="time">07/31 08:12</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="view-right-middle">
                <div class="main-view-title clear">
                    <span>失联信息</span>
                    <a>更多</a>
                </div>
                <div class="view-right-table">
                    <table class="table table-list table-hover table-striped">
                        <thead>
                            <tr>
                                <th class="customer-info">客户信息</th>
                                <th class="time">生效时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="customer-info"><span>浙江省杭州市杭州火电厂</span></td>
                                <td class="time">07/31 08:12</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="view-right-bottom">
                <div class="main-view-title clear">
                    <span>过期信息</span>
                    <a>更多</a>
                </div>
                <div class="view-right-table">
                    <table class="table table-list table-hover table-striped">
                        <thead>
                            <tr>
                                <th class="customer-info">客户信息</th>
                                <th class="time">失效时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="customer-info"><span>浙江省杭州市杭州火电厂</span></td>
                                <td class="time">07/31 08:12</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<script>

    $(window).resize(function () {
        setStyle();
    })
    function setStyle() {
        $("#screen").css('height',window.innerHeight);
        $(".main").css({
            marginLeft:'50px',
            marginright:0,
            margintop:0,
            marginbottom:0,
        })
        $(".main-view").css('height',window.innerHeight - 20);
        $("#pie").css('height',(window.innerHeight - 30) / 3 - 34);
        $(".header-center").css({
            width: window.innerWidth * 0.322,
            marginLeft: -window.innerWidth * 0.161,
        })
        $(".aside").css({
            'height':window.innerHeight,
        })
        $(".view-right-table tbody").css({
            'height':(window.innerHeight - 40) / 3 - 68,
            overflowY:'auto',
        })
    }
    setStyle();

    $("#menu-unfold").on('click',function(){
        $("#aside").css({
            'display':'block',
        })
        $("#aside-fold").css({
            'display':'none',
        })
        $(".main").css({
            marginLeft:'200px',
            marginright:0,
            margintop:0,
            marginbottom:0,
        })
    })

    $("#menu-packup").on('click',function(){
        $("#aside").css({
            'display':'none',
        })
        $("#aside-fold").css({
            'display':'block',
        })
        $(".main").css({
            marginLeft:'50px',
            marginright:0,
            margintop:0,
            marginbottom:0,
        })
    })

    let chart;
    let provinceChart;
    let cityChart;
    let toolTipChart;
    let showC3Chart;
    let map;
    const {DataView} = DataSet;

    //构造数据
    function processData(mapData) {
        console.log(mapData)
        // 构造虚拟数据
        const userData = [];
        const features = mapData.features;
        for (let i = 0; i < features.length; i++) {
            const name = features[i].properties.name;
            const id = features[i].id;
            userData.push({
                name: name,
                value: Math.round(Math.random() * 1000),
                name1: '未净化总量',
                value1: Math.round(Math.random() * 10000),
                name2: '已净化总量',
                value2: Math.round(Math.random() * 10000),
                id: id
            });
        }
        const ds = new DataSet();
        const geoDataView = ds.createView().source(mapData, {
            type: 'GeoJSON',
        }); // geoJSON 经纬度数据

        // 用户数据
        const dvData = ds.createView().source(userData);
        dvData.transform({
            type: 'geo.region',
            field: 'name',
            geoDataView: geoDataView,
            as: ['longitude', 'lantitude'],
        });
        return dvData;
    }

    //初始化全国地图数据
    function initCountry() {
        const mapData = ChinaGeoJSON['China'];
        const chinaDv = processData(mapData);
        const longitudeRange = chinaDv.range('longitude');
        const lantitudeRange = chinaDv.range('lantitude');
        const ratio = (longitudeRange[1] - longitudeRange[0]) / (lantitudeRange[1] - lantitudeRange[0]);

        chart = new G2.Chart({
            container: 'china',
            forceFit: true,
            // width: 600,
            height: (window.innerHeight-60) / 3 * 2,
            padding: 0,
            animate: false
        });

        chart.source(chinaDv);
        // chart.tooltip({
        //     showTitle:true
        // });
        chart.tooltip(true, {
          containerTpl: '<div class="g2-tooltip">'
            + '<div class="g2-tooltip-title" style="margin:10px 0;"></div>'
            + '<ul style="display:flex" class="g2-tooltip-list"></ul></div>',
          itemTpl: '<li style="flex:1;margin:0 5px;" data-index={index}>' +
          '<div style="color:{color};">{value}万立方</div>' +
          '<div style="position:relative;height:100px;">' +
          '<div style="position:absolute;left:50%;bottom:0;width:20px;height:{height};margin-left:-10px;background-color:{color};"></div>' +
          '</div><div style="margin:0 auto;color:{color};">{name}</div></li>'
        });
        chart.tooltip({
          'g2-tooltip': {
            position: 'absolute',
            visibility: 'hidden',
            border : '1px solid #efefef',
            backgroundColor: 'white',
            color: '#000',
            opacity: "0.8",
            padding: '5px',
            'transition': 'top 200ms,left 200ms'
          }, // 设置 tooltip 的 css 样式
          'g2-tooltip-list': {
            margin: '10px'
          }
        });
        chart.axis(false);
        chart
                .polygon()
                .position('longitude*lantitude')
                // .label('name', {
                //     textStyle: {
                //         fill: '#000 ',
                //         fontSize: 10,
                //         shadowBlur: 2,
                //         shadowColor: 'rgba(0, 0, 0, .45)'
                //     }
                // })
                .style({
                    stroke: '#bfbfbf',
                    lineWidth: 1,
                    // fill: '#e3e3e3',
                    // globalAlpha: 0.85,
                    // cursor: 'pointer', // 设置鼠标手势
                })
                .color('value', '#DAA520-#FFFFE0-#9370DB-#6A5ACD-#008B8B-#87CEFA-#FFFACD')
                .select({
                    // 设置是否允许选中以及选中样式
                    mode: 'single', // 多选还是单选
                    style: {
                        fill: '#1890ff', // 选中的样式
                    },
                });
        chart.render();

        //全国 - 点击事件
        chart.on('plotclick', function (ev) {
            $("#china").css("display","none");
            $("#province").css("display","block");
            $("#city").css("display","none");
            const shape = ev.shape;

            if (!shape || !shape.name) {
                return false;
            }
            if (shape.get('selected')) {
                const item = shape.get('origin');
                const data = item['_origin'];
                const name = data.name;
                renderProvinceChart(name);
                initC3();
            } else {
                provinceChart && provinceChart.clear();
            }
        });

        //全国 - 提示框change事件
        chart.on('tooltip:change', function (ev) {
            const items = ev.items; // tooltip显示的项
            const origin = items[0]; // 将一条数据改成多条数据
            const range = origin.point._origin;
            items.splice(0); // 清空
            items.push({
                name: range.name1,
                title: range.name,
                marker: true,
                color: 'purple',
                value: range.value1,
                height: range.value1 / (range.value1 + range.value2) * 100 + 'px'
            });
            items.push({
                name: range.name2,
                title: range.name,
                marker: true,
                color: 'green',
                value: range.value2,
                height: range.value2 / (range.value1 + range.value2) * 100 + 'px'
            });
            if (items && items.length > 0) {
                //initToolTip(items);
            }
        })
    }

    //初始化某省地图数据
    function renderProvinceChart(name) {
        const provinceData = ChinaGeoJSON[name];
        provinceChart && provinceChart.destroy();
        provinceChart = null;
        cityChart && cityChart.destroy();
        cityChart = null;
        if (!provinceData) {
            return;
        }
        const dv = processData(provinceData);

        // start: 计算地图的最佳宽高
        const longitudeRange = dv.range('longitude');
        const lantitudeRange = dv.range('lantitude');
        const ratio = (longitudeRange[1] - longitudeRange[0]) / (lantitudeRange[1] - lantitudeRange[0]);
        let width;
        let height;
        if (ratio > 1) {
            width = 450;
            height = width / ratio;
        } else {
            width = 350 * ratio;
            height = 350;
        }
        // end: 计算地图的最佳宽高

        provinceChart = new G2.Chart({
            container: 'province',
            forceFit: true,
            // width,
            // height,
            padding: 0
        });
        provinceChart.source(dv);
        provinceChart.axis(false);
        provinceChart.tooltip(true, {
          containerTpl: '<div class="g2-tooltip">'
            + '<div class="g2-tooltip-title" style="margin:10px 0;"></div>'
            + '<ul style="display:flex" class="g2-tooltip-list"></ul></div>',
          itemTpl: '<li style="flex:1;margin:0 5px;" data-index={index}><div style="color:{color};">{value}万立方</div><div style="position:relative;height:100px;"><div style="position:absolute;left:50%;bottom:0;width:20px;height:{height};margin-left:-10px;background-color:{color};"></div></div><div style="margin:0 auto;color:{color};">{name}</div></li>'
        });
        provinceChart.tooltip({
          'g2-tooltip': {
            position: 'absolute',
            visibility: 'hidden',
            border : '1px solid #efefef',
            backgroundColor: 'white',
            color: '#000',
            opacity: "0.8",
            padding: '5px',
            'transition': 'top 200ms,left 200ms'
          }, // 设置 tooltip 的 css 样式
          'g2-tooltip-list': {
            margin: '10px'
          }
        });
        provinceChart
                .polygon()
                .position('longitude*lantitude')
                .label('name', {
                    textStyle: {
                        fill: '#fff',
                        fontSize: 10,
                        shadowBlur: 2,
                        shadowColor: 'rgba(0, 0, 0, .45)'
                    },
                })
                .style({
                    stroke: '#000',
                    lineWidth: 1,
                })
                .color('value', '#BAE7FF-#1890FF-#0050B3')
                .select({
                    // 设置是否允许选中以及选中样式
                    mode: 'single', // 多选还是单选
                    style: {
                        fill: '#000', // 选中的样式
                    }
                });
        provinceChart.render();

        //某省 - 点击事件
        provinceChart.on('plotclick', function (ev) {
            $("#china").css("display","none");
            $("#province").css("display","none");
            $("#city").css("display","block");
            initC3();
            const shape = ev.shape;
            if (!shape || !shape.name) {
                return false;
            }
            if (shape.get('selected')) {
                const item = shape.get('origin');
                const data = item['_origin'];
                const id = data.id;
                renderCityChart(id);
            } else {
                cityChart && cityChart.clear();
            }
        })

        //某省 - 提示框change事件
        provinceChart.on('tooltip:change', function (ev) {
            const items = ev.items; // tooltip显示的项
            const origin = items[0]; // 将一条数据改成多条数据
            const range = origin.point._origin;
            items.splice(0); // 清空
            items.push({
                name: range.name1,
                title: range.name,
                marker: true,
                color: 'purple',
                value: range.value1,
                height: range.value1 / (range.value1 + range.value2) * 100 + 'px'
            });
            items.push({
                name: range.name2,
                title: range.name,
                marker: true,
                color: 'green',
                value: range.value2,
                height: range.value2 / (range.value1 + range.value2) * 100 + 'px'
            });
            if (items && items.length > 0) {
                //initToolTip(items);
            }
        })
    }

    //初始化某市地图数据
    function renderCityChart(id) {
        cityChart && cityChart.destroy();
        cityChart = null;
        if (id) {
            let cityData;
            $.ajax({
                url: "https://wanlong.mxnet.cn/wanlong-assets/assets/mapdata/geometryCouties/" + id + "00.json",
                type: "get",
                dataType: "json",
                success: function (data) {
                    cityData = data;
                    if (!cityData) {
                        return;
                    }
                    const dv = processData(cityData);

                    // start: 计算地图的最佳宽高
                    const longitudeRange = dv.range('longitude');
                    const lantitudeRange = dv.range('lantitude');
                    const ratio = (longitudeRange[1] - longitudeRange[0]) / (lantitudeRange[1] - lantitudeRange[0]);
                    let width;
                    let height;
                    if (ratio > 1) {
                        width = 500;
                        height = width / ratio;
                    } else {
                        width = 500 * ratio;
                        height = 500;
                    }
                    // end: 计算地图的最佳宽高

                    cityChart = new G2.Chart({
                        container: 'city',
                        forceFit: true,
                        // width,
                        // height,
                        padding: 0
                    });
                    cityChart.source(dv);
                    cityChart.axis(false);
                    cityChart.tooltip(true, {
                      containerTpl: '<div class="g2-tooltip">'
                        + '<div class="g2-tooltip-title" style="margin:10px 0;"></div>'
                        + '<ul style="display:flex" class="g2-tooltip-list"></ul></div>',
                      itemTpl: '<li style="flex:1;margin:0 5px;" data-index={index}><div style="color:{color};">{value}万立方</div><div style="position:relative;height:100px;"><div style="position:absolute;left:50%;bottom:0;width:20px;height:{height};margin-left:-10px;background-color:{color};"></div></div><div style="margin:0 auto;color:{color};">{name}</div></li>'
                    });
                    cityChart.tooltip({
                      'g2-tooltip': {
                        position: 'absolute',
                        visibility: 'hidden',
                        border : '1px solid #efefef',
                        backgroundColor: 'white',
                        color: '#000',
                        opacity: "0.8",
                        padding: '5px',
                        'transition': 'top 200ms,left 200ms'
                      }, // 设置 tooltip 的 css 样式
                      'g2-tooltip-list': {
                        margin: '10px'
                      }
                    });
                    cityChart
                            .polygon()
                            .position('longitude*lantitude')
                            .label('name', {
                                textStyle: {
                                    fill: '#fff',
                                    fontSize: 10,
                                    shadowBlur: 2,
                                    shadowColor: 'rgba(0, 0, 0, .45)'
                                },
                            })
                            .style({
                                stroke: '#fff',
                                lineWidth: 1,
                            })
                            .color('value', '#BAE7FF-#1890FF-#0050B3')
                            .select({
                                // 设置是否允许选中以及选中样式
                                mode: 'single', // 多选还是单选
                                style: {
                                    fill: '#000000', // 选中的样式
                                }
                            });
                    cityChart.render();

                    //某市 - 点击事件
                    cityChart.on('plotclick', function (ev) {
                        const data = ev.data;
                        let name = '';
                        if (data) {
                            name = data._origin['name'];
                            if (!name) {
                                name = data.name;
                            }
                            //initC3();
                            $("#allmap").css("display","block");
                            $("#city").css("display","none");
                            initMap(name);
                        }
                    })

                    //某市 - 提示框change事件
                    cityChart.on('tooltip:change', function (ev) {
                        const items = ev.items; // tooltip显示的项
                        const origin = items[0]; // 将一条数据改成多条数据
                        const range = origin.point._origin;
                        items.splice(0); // 清空
                        items.push({
                            name: range.name1,
                            title: range.name,
                            marker: true,
                            color: 'purple',
                            value: range.value1,
                            height: range.value1 / (range.value1 + range.value2) * 100 + 'px'
                        });
                        items.push({
                            name: range.name2,
                            title: range.name,
                            marker: true,
                            color: 'green',
                            value: range.value2,
                            height: range.value2 / (range.value1 + range.value2) * 100 + 'px'
                        });
                        if (items && items.length > 0) {
                            //initToolTip(items);
                        }
                    })
                }
            });
        }
    }

    //初始化某个地区的排污净化直状图
    function initToolTip(data) {
        toolTipChart && toolTipChart.destroy();
        toolTipChart = null;
        // Step 1: 创建 Chart 对象
        toolTipChart = new G2.Chart({
            container: 'toolTip', // 指定图表容器 ID
            width: 600, // 指定图表宽度
            height: 250 // 指定图表高度
        });
        // Step 2: 载入数据源
        toolTipChart.source(data);

        toolTipChart.tooltip(false);
        toolTipChart.axis('value', {
            grid: null,
            tickLine: null,
            label: null,
            title: {
                autoRotate: false,
                textStyle: {
                    fontSize: 12, // 文本大小
                    textAlign: 'start', // 文本对齐方式
                    fill: '#000', // 文本颜色
                },
                position: 'end'
            }
        });
        toolTipChart.scale('value', {
            alias: data[0].title
        });
        toolTipChart.axis('name', {
            tickLine: null,
            line: null
        });
        // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
        toolTipChart.interval().position('name*value').color('gary').label('value');
        // Step 4: 渲染图表
        toolTipChart.render();
    }

    //初始化百度地图
    function initMap(name){
        $('.view-left-bottom').css({
            display:'none'
        })
        /**加载百度地图*/
        const strName = name;
        console.log(strName);
        map = new BMap.Map("allmap"); // 创建Map实例
        //        map.centerAndZoom(new BMap.Point(longitude,latitude), 13); //初始化地图,设置中心点坐标和地图级别
        map.centerAndZoom(strName, 14);
//        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
//        map.setCurrentCity(strName);          // 设置地图显示的城市 此项是必须设置的
//        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
//        var geolocationControl = new BMap.GeolocationControl();
//        map.addControl(geolocationControl);
    }

    //初始化饼图
    function initC3() {
        showC3Chart && showC3Chart.destroy();
        showC3Chart = null;
        let data = [];

        data={{mydata["json_state_list"]}};

        const dv = new DataView();
        dv.source(data).transform({
            type: 'percent',
            field: 'count',
            dimension: 'item',
            as: 'percent'
        });
        showC3Chart = new G2.Chart({
            container: 'c3',
            forceFit: true,
            height:(window.innerHeight - 60) / 3 - 26,
            padding: [ 0, 0, 70, 0 ] // 上，右，下，左
        });
        showC3Chart.source(dv, {
            percent: {
                formatter: function (val) {
                    val = (val * 100) + '%';
                    return val;
                }
            }
        });
        showC3Chart.coord('theta');
        showC3Chart.tooltip({
            showTitle: false,
            itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
        });
        showC3Chart.axis('xField', {
            title: 'tj'
        })
        showC3Chart.legend({
          title: null, // 不展示图例的标题
          marker: 'square' // 设置图例 marker 的显示样式
        });
        showC3Chart.intervalStack()
                .position('percent')
                .color('item')
                .label('percent', {
                    offset: -40,
                    // autoRotate: false,
                    textStyle: {
                        rotate: 0,
                        textAlign: 'center',
                        shadowBlur: 2,
                        shadowColor: 'rgba(0, 0, 0, .45)'
                    }
                })
                .tooltip('item*percent', function (item, percent) {
                    percent = percent * 100 + '%';
                    return {
                        name: item,
                        value: percent
                    };
                })
                .style({
                    lineWidth: 1,
                    stroke: '#fff'
                });
        showC3Chart.render();
    }

    

    function init() {
        showC3Chart && showC3Chart.destroy();
        showC3Chart = null;
        toolTipChart && toolTipChart.destroy();
        toolTipChart = null;
        cityChart && cityChart.destroy();
        cityChart = null;
        provinceChart && provinceChart.destroy();
        provinceChart = null;
        chart && chart.destroy();
        chart = null;
        initCountry();
        initC3();
    }

    init();

</script>
</body>
</html>